<template>
  <div class="content">
    <div class="top-search">
      <date-picker :date="initDate" @query="query" />
    </div>
    <div class="item-wrapper">
      <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="finishText"
          @load="onLoad"
        >
        <van-cell-group class='collapse' v-for="(item,index) in listData" :key="index">
          <van-cell title="标题" class="cell" :value="item.bt">
            <template #value>
              <div class="cell-title">{{ item.bt }}</div>
            </template>
          </van-cell>
          <van-cell title="类别" class="cell" :value="item.lb" />
          <van-cell title="时间" class="cell" :value="item.dt" />
          <van-cell title="保存人" class="cell" :value="item.bcr" />
        </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>

  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import datePicker from '../date-picker/date-picker.vue';
import { Toast } from 'vant';
import moment from 'moment';
import { appApi } from '@/api';
import { LoginUser } from '@/interface/home';
import { IOpenData, IOpenDetail, IQueryParam } from '@/interface/openComm';
import { openData, testData2 } from './index';

const props = defineProps({
  loginUser: {
    type: Object as () => LoginUser,
    default: () => ({}),
  },
  lb: {
    type: String,
    default: '',
  },
})


// 下拉刷新标识
const refreshing = ref(false);
// 列表加载标识
const loading = ref(false);
// 列表加载完成标识
const finished = ref(false);
// 初始日期
const initDate = ref(moment().format('YYYYMM'));
// 查询参数
const queryParam = ref<IQueryParam>({
  ny: initDate.value,
  orgcode: '',
  start: 0,
  pagesize: 10,
  lb: props.lb,
});
// 查询数据
const resultData = ref<IOpenData>(openData);

// 列表数据
const listData = ref<IOpenDetail[]>([]);

const finishText = ref(listData.value.length > 0 ? '没有更多了' : '暂无数据');

onMounted(() => {
  queryParam.value.orgcode = props.loginUser.orgCode;
  //query(queryParam.value.ny);
})

const query = async (date: string) => {
  listData.value = [];
  finished.value = false;
  queryParam.value.start = 0;
  queryParam.value.ny = date;
  findOpenItem();
}

const findOpenItem = async () => {
  await appApi.getCwgkByLb(queryParam.value.lb,queryParam.value.orgcode,queryParam.value.ny,queryParam.value.start,queryParam.value.pagesize).then((res :any) => {
    resultData.value = res;
    listData.value.push(...res.content);
    // resultData.value = testData2;
    // listData.value.push(...testData2.content);
  }).catch((err) => {
    Toast('查询公开数据失败：' + err);
  })
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
}

const onLoad = () => {
  setTimeout(async () => {
    if (refreshing.value) {
      queryParam.value.start = 0;
      listData.value = [];
      refreshing.value = false;
    } else {
      queryParam.value.start = queryParam.value.start + 1;
    }
    try {
      await findOpenItem();
      if(queryParam.value.start >= resultData.value.totalPages) {
        finished.value = true;
      }
      Toast('刷新成功');
    } catch (error) {
      console.log('刷新失败',error);
    }
    loading.value = false;
  }, 200);
};

</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-search {
    display: flex;
    height: fit-content;
  }
  .item-wrapper {
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .list {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .collapse {
    margin-top: 8px;
    :deep(.van-collapse-item__content) {
      padding: 1px 3px 0 3px;
    }
    :deep(.van-cell-group[data-v-6d336ddd]:last-child) {
      margin-top: 0;
    }
  }

  .cell-title {
    font-size: 16px;
    font-weight: bold;
  }

  .cell :deep(.van-cell__value) {
    color: #09031e;
    font-weight: bold;
  }

  .van-cell-group:last-child {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
